<template>
	<view class="staff">
		<view class="tab flex_center">
			<view class="tab-item flex_r_around" @click="onTab(1)" :id="tab == 1 ? 'select' : ''">
				<text>已加入</text>
			</view>

			<view class="tab-item flex_r_around" @click="onTab(2)" :id="tab == 2 ? 'select' : ''">
				<text>已申请</text>
			</view>
		</view>

		<view class="block" v-show="tab == 1">
			<view class="list" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
				<view class="top flex_center">
					<view class="image">
						<image :src="item.avatar" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="nickname hidden">{{item.nickname}}</view>
						<view class="sign hidden">{{item.sign}}</view>
						<view class="order">总订单:{{item.order_num}}单</view>
					</view>
				</view>
				<view class="bottom flex_r_between">
					<view></view>
					<view class="btn flex_r_around" @click.stop="removeStaff(item)">
						<text>立即解约</text>
					</view>
				</view>
			</view>

			<empty v-if="!list.length"></empty>

			<view class="btn_box flex_r_around">
				<view class="btn flex_center" @click="show = true">
					<u-icon name="plus" color="#FFF" size="16"></u-icon>
					<text>手机号添加</text>
				</view>
				<view class="btn flex_center" @click="$util.toUrl('/pages/store/staff/code')">
					<u-icon name="plus" color="#FFF" size="16"></u-icon>
					<text>二维码添加</text>
				</view>
			</view>
		</view>

		<view class="block" v-show="tab == 2">
			<view class="technician">
				<view class="item" v-for="(item,index) in technician" :key="index">
					<view class="top flex_center">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill"></image>
						</view>
						<view class="text">
							<text>{{ item.nickname }}</text>
							<view>{{ item.create_time }}</view>
						</view>
					</view>

					<view class="technician-btn flex_center">
						<view class="btn-item flex_r_around red" @click="setApply(item.id , 3)">
							<text>拒绝</text>
						</view>

						<view class="btn-item flex_r_around green" @click="setApply(item.id , 2)">
							<text>同意</text>
						</view>
					</view>
				</view>
			</view>

			<empty v-if="!technician.length"></empty>
		</view>

		<!-- 添加员工弹窗 -->
		<!-- add_staff_bg -->
		<u-popup :safeAreaInsetBottom="false" :show="show" mode="center" bgColor="transparent" @close="close">
			<view class="addStaff flex_c">
				<input type="text" v-model="mobile" placeholder="请输入员工手机号" placeholder-class="input-placeholder" />
				<view class="btn_view" @click="addStaff">继续添加</view>
				<view class="close" @click="show = false">
					<u-icon name="close-circle" color="#FFF" size="28"></u-icon>
				</view>
			</view>
		</u-popup>

		<u-modal :show="showmodel" :content="`确认删除技师${detele_username}`" title="提示" :show-cancel-button="true"
			@cancel="showmodel = false" @confirm="confirmDetele"></u-modal>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				list: [],
				total: 0,
				page: 1,

				show: false,

				// 员工手机号
				mobile: '',

				tab: 1,


				// 技师数据
				technician: [],
				technicianPage: 1,
				technicianTotal: 0,

				user: {},


				showmodel: false,
				detele_id: 0,
				detele_username: '',

			}
		},
		methods: {

			onTab(e) {
				this.tab = e;
				this.refresh();
			},

			getList() {
				this.$get('/store.store/staffList', {
					"page": this.page
				}).then(res => {
					this.total = res.data.total;
					res.data.data.forEach((e) => {
						this.list.push(e)
					})
				})
			},

			refresh() {
				if (this.tab == 1) {
					this.page = 1;
					this.$get('/store.store/staffList', {
						"page": this.page
					}).then(res => {
						this.list = [];
						this.total = res.data.total;
						res.data.data.forEach((e) => {
							this.list.push(e)
						})
						uni.stopPullDownRefresh();
					})
				} else {
					this.technicianPage = 1;
					this.$get('/store.store/getApplyJoinProvider', {
						page: this.technicianPage,
						status: 1,
						store_id: this.user.store_id
					}).then(res => {
						this.technician = [];
						this.technicianTotal = res.data.total;
						this.technician.push(...res.data.data);
						uni.stopPullDownRefresh();
					})
				}
			},

			onDetele(item) {
				this.detele_id = item.id;
				this.detele_username = item.username;
				this.showmodel = true;
			},

			confirmDetele() {
				this.$post('/store.technician/delete', {
					id: this.detele_id
				}).then(res => {
					this.showmodel = false;
					this.refresh();
				});
			},

			removeStaff(item) {
				uni.showModal({
					title: '解约',
					content: `是否解约${item.nickname}`,
					confirmText: '立即解约',
					success: (modal) => {
						if (modal.confirm) {
							this.$post('/store.store/removeStaff', {
								provider_id: item.id
							}).then(res => {
								this.refresh();
							})
						}
					}
				})
			},

			toDetail(index) {
				var data = this.list[index];
				uni.navigateTo({
					url: `/pages/store/staff/staffdetail?data=${JSON.stringify(data)}`
				})
			},

			close() {
				this.show = false
			},

			addStaff() {
				this.$get('/store.store/signStaff', {
					mobile: this.mobile
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg)
				})
			},

			getTechnician() {
				this.$get('/store.store/getApplyJoinProvider', {
					page: this.technicianPage,
					status: 1,
					store_id: this.user.store_id
				}).then(res => {
					this.technicianTotal = res.data.total;
					this.technician.push(...res.data.data);
				})
			},

			toAdd(item) {
				if (item) {
					this.$util.toUrl(`/pages/store/staff/addTechnician?data=${JSON.stringify(item)}`)
				} else {
					this.$util.toUrl(`/pages/store/staff/addTechnician`)
				}
			},

			getMore() {
				if (this.tab == 1) {
					if (this.total > this.list.length) {
						this.page++;
						this.getList();
					}
				} else {
					if (this.technicianTotal > this.technician.length) {
						this.technicianPage++;
						this.getTechnician();
					}
				}
			},
			
			setApply(id , status){
				this.$get('/store.store/setApply',{
					id: id,
					status: status
				}).then(res=>{
					this.$util.msg(res.msg);
					this.refresh();
				})
			},
		},

		created() {
			this.user = uni.getStorageSync('user');
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.staff {
		padding: 0 32rpx 130rpx;
	}

	.tab {
		margin-bottom: 24rpx;
		.tab-item {
			margin-right: 16rpx;
			width: 144rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 2rpx solid #ECECED;

			text {
				font-size: 24rpx;
				color: #131313;
			}
		}


		#select {
			background: #FFF7F8;
			border: 2rpx solid #FD2A53;

			text {
				color: #FD2A53;
			}
		}
	}

	.list {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;

		.top {
			.image {
				border-radius: 8rpx;
				overflow: hidden;
				width: 128rpx;
				height: 128rpx;
				background: #D8D8D8;
				margin-right: 20rpx;

				image {
					width: 128rpx;
					height: 128rpx;
				}
			}

			.name {
				overflow: hidden;
				flex: 1;

				.nickname {
					font-size: 32rpx;
					color: #131313;
				}

				.sign {
					font-size: 28rpx;
					color: #999999;
				}

				.order {
					font-size: 28rpx;
					color: #999999;
				}
			}
		}

		.bottom {

			.btn {
				width: 168rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #CCCCCC;

				text {
					font-size: 28rpx;
					color: #131313;
				}
			}

		}
	}

	.btn_box {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100vw;

		.btn {
			width: 328rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			border: 2rpx solid #FD2A53;
			padding-left: 60rpx;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.btn_big {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		width: 100vw;
		z-index: 60;

		.btn {
			width: 686rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			border: 2rpx solid #FD2A53;

			text {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}

	.addStaff {
		width: 640rpx;
		height: 553rpx;
		background: url('https://qiniu-cdn.maeiyun.com//h5static/store/add_staff_bg.png') 0 0 no-repeat;
		background-size: 100%;
		position: relative;

		input {
			font-size: 32rpx;
			color: #131313;
			width: 530rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx #DFDDF2;
			border-radius: 24rpx;
			padding: 0 32rpx;
			margin: 280rpx 0 24rpx;
			box-sizing: border-box;
		}

		.btn_view {
			width: 530rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 48rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.close {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.technician {

		.item {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-top: 20rpx;

			.top {
				.avatar {
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}

				.text {
					text {
						font-weight: 500;
						font-size: 32rpx;
						color: #131313;
					}

					view {
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
					}
				}
			}

			.technician-btn {
				flex-direction: row-reverse;
				margin-top: 16rpx;
				.btn-item {
					width: 168rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					margin-left: 20rpx;
					
					text {
						font-size: 28rpx;
					}
				}
			}

			.red {
				border: 2rpx solid #FD2A53;

				text {
					color: #FD2A53;
				}
			}

			.green {
				border: 2rpx solid #1FC129;

				text {
					color: #1FC129;
				}
			}

		}

	}
</style>